<template>
  <div>
    <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="detailData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>渠道详情</span>
      </div>
      <el-row v-loading="loading" style="width:1120px;padding-bottom:280px;height:100%;overflow-y:auto">
        <el-col :span="18">
          <el-form
            :model="parames"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
          >
            <el-row style="padding: 0 40px">
                  <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                    <a-collapse-panel class="marginB10" header="基础信息" key="1">
                        <el-row>
                          <el-col :span="12">
                              <el-form-item label="是否启用:">
                                <span>{{parames.enable?'是':'否'}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                              <el-form-item label="是否公开:">
                                    <span>{{parames.overt?'是':'否'}}</span>
                                </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="渠道商名称:">
                              <span>{{parames.channelName}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="联系人:">
                              <span>{{parames.contacts}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="手机号:">
                                <span>{{parames.mobile}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="邮箱地址:">
                              <span>{{parames.email}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="渠道来源:">
                              <span v-if="parames.resourceAttribution">{{parames.resourceAttribution.desc}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="负责人:">
                              <span>{{parames.director}}</span>
                            </el-form-item>
                          </el-col>
           
                          <el-col :span="12">
                            <el-form-item label="签约日期:">
                              <span>{{parames.signingDate | formatDate}}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-form-item label="文件:">
                          <div style="cursor:pointer;color:#409efe" @click="handleDownFile(item)" v-for="(item,index) in parames.attachmentSet" :key="index">{{item.name}}</div>
                        </el-form-item>
                        <el-form-item label="备注:">
                          <span>{{parames.remark}}</span>
                        </el-form-item>
                    </a-collapse-panel>

                    <a-collapse-panel class="marginB10" header="账户信息" key="2">
                      <el-row style="margin-top: 20px" :gutter="14">
                        <el-col style="margin-bottom:10px" :span="8" v-for="(item,index) in parames.accountList" :key="index">
                          <el-card class="box-card" shadow="never">
                            <div slot="header" class="clearfix">
                                <span v-if="item.accountType.name == 'BANK'">银行账户</span>
                                <span v-if="item.accountType.name == 'ALIPAY'">支付宝账户</span>
                                <span v-if="item.accountType.name == 'WE_CHAT'">微信账户</span>
                                <span v-if="item.accountType.name == 'CASH'">现金账户</span>
                            </div>
                            <div>
                              <p>{{item.number}}</p>
                              <p>{{item.name}}</p>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </a-collapse-panel>
                  </a-collapse>

            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div class="form-team-box">
            <div>
              <el-button
                size="small"
                icon="el-icon-edit"
                @click.native="handleEdit"
                style="width:200px;text-align: left;margin-bottom:10px"
              >编辑内容</el-button>
              <a-popconfirm
                title="是否确认删除?"
                @confirm="handleCustomer"
                okText="是"
                cancelText="否"
              >
                <el-button
                  size="small"
                  icon="el-icon-delete"
                  style="width:200px;text-align: left;margin:0 0 10px 0;"
                >删除渠道</el-button>
              </a-popconfirm>
            </div>

          </div>
        </el-col>
      </el-row>


    </a-drawer>
    <createdDialog :dialogData="dialogData"  @checkRender="render" @checkOpen="checkOpen"></createdDialog>

  </div>
</template>

<script>
import createdDialog from "./addChannelDialog.vue"; //新建渠道

export default {
  props: ["detailData"],
  data() {
    return {
      loading: false,
      activeKey: ['1'],
      parames: {
        businessInfoDO: {},
        financialInfoDO: {}
      },
      dialogData: {
        type: '',
        id: '',
        title: '',
        show: false
      },
      activeNames: ['1','2'],
      tableData: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick() {
      //切换主tab
    },
    handleClose() {
      //关闭弹窗
      this.detailData.show = false;
    },
    handleDownFile (row) { //附件下载
      window.location.href = this.$api.postChannelAttachmentDownload+'?name=' + row.name + '&url=' + row.url
    },
    handleCustomer () { //删除该客户
      this.$post(this.$api.postChannelDel,{ //根据id
        channelId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.handleClose()
          this.$emit('checkRender')
        }
      })
    },
    checkOpen (type) { //重新打开并向上刷新列表数据
      this.detailData.show = true
      if (type == '1') { //是点击了修改保存按钮-需刷新列表数据
        setTimeout(() => {
          this.$emit('checkRender')
        }, 200);
      }
    },
    handleEdit (){ //编辑-修改
      this.dialogData.id = this.detailData.id
      this.dialogData.title = '编辑渠道'
      this.dialogData.type = 'edit'
      this.dialogData.show = true
      this.handleClose()
    },
    render () {
      this.loading = true
      this.$post(this.$api.postChannelFind,{ //根据id获取详情
        channelId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.parames = response.data.data
          setTimeout(() => {
            this.loading = false
          }, 200);
        }
      })
    },
  },
  components: {
    createdDialog
  },
  computed: { //计算属性
    changeDialog () {
      return this.detailData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.render()
        } else {
          
        }
      }
    },
    deep: true
  }
};
</script>

<style>
.hetong-icon .ant-collapse-arrow{
  left: 20px!important;
}
</style>
